<template>
    <!-- 科目明细 table -->
    <hsTableV2 isMultistageHeader :columns="tableData.cloumns" :data="tableData.data" :expendList="expandedRowKeys" isTree
        fixed expandColumnKey="id" :multistageHeaderData="multistageData">
        <!-- <template #headerSlot="props">
            <CustomizedHeader v-bind="props" />
        </template> -->
    </hsTableV2>
</template>

<script setup lang="jsx">
import { ref, reactive, computed, watch } from 'vue'
import detailApi from '@/api/Manage/Business/detailPages'
// import detailApi from '@/api/SelfSupport/detailPages'
import { toThousands } from '@/utils/number-util'


const props = defineProps({
    biProjectCode: {
        type: String,
        required: true,
        default: ''
    },
    type: {
        // 商办产1，酒寓2
        type: String,
        required: true,
        default: ''
    },
    yearmonth: {
        type: String,
        required: true,
        default: ''
    },
    isFresh: {
        type: String,
        required: true,
        default: ''
    }
})

let multistageData = {}
const initMultistageData = (yearmonth) => {
    const year = yearmonth.split('-')[0]
    let month = yearmonth.split('-')[1]
    month[0] == 0 ? month = month.substring(1, 2) : ''
    multistageData['multCol2'] = {
        key: 'multCol2',
        title: `${year}年${month}月`,
        childrenIndex: [2, 3, 4, 5, 6]
    }
    multistageData['multCol7'] = {
        key: 'multCol7',
        title: `${year}年1-${month}月`,
        childrenIndex: [7, 8, 9, 10, 11]
    }
    multistageData['multCol12'] = {
        key: 'multCol12',
        title: `${year}年度`,
        // childrenIndex: props.type == 1 ? [12, 13, 14, 15] : [12, 13]
        childrenIndex: props.type == 1 ? [12, 13, 14] : [12, 13]
    }
}
const windowWidth = document.documentElement.scrollWidth;
// const celWidth = props.type == 1 ? (windowWidth - 138 - 350) / 14 : (windowWidth - 138 - 350) / 12
let celWidth = props.type == 1 ? (windowWidth - 138 - 300) / 13 : (windowWidth - 138 - 300) / 12
celWidth = celWidth > 82 ? celWidth : 82
let tableData = reactive({
    loading: false,
    data: [],
    cloumns: [
        {
            key: "id",
            dataKey: "id",
            title: "序号",
            align: "left",
            width: 100,
        },
        {
            key: "subjectName",
            dataKey: "subjectName",
            title: "科目",
            width: 200,
            align: "left",
            indentKey: 'subjectLevel', // 设置缩进字段
            cellRenderer: ({ rowData }) => (
                <div style={{ display: 'flex' }}>
                    <div style={{ width: `${12 * (rowData.subjectLevel - 1)}px`, flexShrink: 0 }}></div>
                    <div>{rowData.subjectName}</div>
                </div>
            )
        },
        // 当前月份
        {
            key: "monthBudget",
            dataKey: "monthBudget",
            title: "预算",
            align: "right",
            width: celWidth,
            parentKey: 'multCol2',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.monthBudgetYuan)} placement="top">{toThousands(rowData.monthBudget)}</ElTooltip>
            )
        },
        {
            key: "monthActual",
            dataKey: "monthActual",
            title: "实际",
            align: "right",
            width: celWidth,
            parentKey: 'multCol2',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.monthActualYuan)} placement="top">{toThousands(rowData.monthActual)}</ElTooltip>
            )
        },
        {
            key: "monthRate",
            dataKey: "monthRate",
            title: "完成率",
            align: "right",
            width: celWidth,
            parentKey: 'multCol2',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={`${rowData.monthRate}`} placement="top"><span class={rowData.monthRateColorLab == 1 ? 'zs-text-red' : ''}>{rowData.monthRate}</span></ElTooltip>
            )
        },
        {
            key: "monthQk",
            dataKey: "monthQk",
            title: props.type == 1 ? "缺口" : "上年同期",
            align: "right",
            width: celWidth,
            parentKey: 'multCol2',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.monthQkYuan)} placement="top">{toThousands(rowData.monthQk)}</ElTooltip>
            )
        },
        {
            key: "monthTb",
            dataKey: "monthTb",
            title: "同比",
            align: "right",
            width: celWidth,
            parentKey: 'multCol2',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={`${rowData.monthTb}`} placement="top">{rowData.monthTb}</ElTooltip>
            )
        },
        // 1-当前月
        {
            key: "budgetPeriod",
            dataKey: "budgetPeriod",
            title: "预算",
            align: "right",
            width: celWidth,
            parentKey: 'multCol7',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.budgetPeriodYuan)} placement="top">{toThousands(rowData.budgetPeriod)}</ElTooltip>
            )
        },
        {
            key: "actualPeriod",
            dataKey: "actualPeriod",
            title: "实际",
            align: "right",
            width: celWidth,
            parentKey: 'multCol7',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.actualPeriodYuan)} placement="top">{toThousands(rowData.actualPeriod)}</ElTooltip>
            )
        },
        {
            key: "ratePeriod",
            dataKey: "ratePeriod",
            title: "完成率",
            align: "right",
            width: celWidth,
            parentKey: 'multCol7',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={`${rowData.ratePeriod}`} placement="top"><span class={rowData.ratePeriodColorLab == 1 ? 'zs-text-red' : ''}>{rowData.ratePeriod}</span></ElTooltip>
            )
        },
        {
            key: "periodQk",
            dataKey: "periodQk",
            title: props.type == 1 ? "缺口" : "上年同期",
            align: "right",
            width: celWidth,
            parentKey: 'multCol7',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.periodPkYuan)} placement="top">{toThousands(rowData.periodQk)}</ElTooltip>
            )
        },
        {
            key: "periodTb",
            dataKey: "periodTb",
            title: "同比",
            align: "right",
            width: celWidth,
            parentKey: 'multCol7',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={`${rowData.periodTb}`} placement="top">{rowData.periodTb}</ElTooltip>
            )
        },
        // 本年度
        {
            key: "budgetYear",
            dataKey: "budgetYear",
            title: "预算",
            align: "right",
            width: celWidth,
            parentKey: 'multCol12',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.budgetYearYuan)} placement="top">{toThousands(rowData.budgetYear)}</ElTooltip>
            )
        },
        // {
        //     key: "year_forecast",
        //     dataKey: "year_forecast",
        //     title: "实际",
        //     align: "right",
        //     width: celWidth,
        //     parentKey: 'multCol12',
        //     cellRenderer: ({ rowData }) => (
        //         <ElTooltip content={toThousands(rowData.year_forecast_yuan)} placement="top">{toThousands(rowData.year_forecast)}</ElTooltip>
        //     )
        // },
        // {
        //     key: "year_pc",
        //     dataKey: "year_pc",
        //     title: "完成率",
        //     align: "right",
        //     width: celWidth,
        //     parentKey: 'multCol12',
        //     cellRenderer: ({ rowData }) => (
        //         <ElTooltip content={`${rowData.year_pc_2}%`} placement="top">{`${rowData.year_pc == '-' ? '-' : rowData.year_pc + '%'}`}</ElTooltip>
        //     )
        // },
        // {
        //     key: "year_breach_value",
        //     dataKey: "year_breach_value",
        //     title: "缺口",
        //     align: "right",
        //     width: 160,
        //     parentKey: 'multCol12',
        //     cellRenderer: ({ rowData }) => (
        //         <ElTooltip content={toThousands(rowData.year_breach_value_yuan)} placement="top">{toThousands(rowData.year_breach_value)}</ElTooltip>
        //     )
        // },
        // {
        //     key: "year_breach_value",
        //     dataKey: "year_breach_value",
        //     title: "同比",
        //     align: "right",
        //     width: 160,
        //     parentKey: 'multCol12',
        //     cellRenderer: ({ rowData }) => (
        //         <ElTooltip content={toThousands(rowData.year_breach_value_yuan)} placement="top">{toThousands(rowData.year_breach_value)}</ElTooltip>
        //     )
        // },
    ],
})

if (props.type == 1) {
    const list = [
        {
            key: "ycYear",
            dataKey: "ycYear",
            title: "实际",
            align: "right",
            width: celWidth,
            parentKey: 'multCol12',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={toThousands(rowData.ycYearYuan)} placement="top">{toThousands(rowData.ycYear)}</ElTooltip>
            )
        },
        {
            key: "rateActYear",
            dataKey: "rateActYear",
            title: "完成率",
            align: "right",
            width: celWidth,
            parentKey: 'multCol12',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={`${rowData.rateActYear}`} placement="top"><span class={rowData.yearRateColorLab == 1 ? 'zs-text-red' : ''}>{rowData.rateActYear}</span></ElTooltip>
            )
        }
        // ,
        // {
        //     key: "yearQk",
        //     dataKey: "yearQk",
        //     title: "缺口",
        //     align: "right",
        //     width: celWidth,
        //     parentKey: 'multCol12',
        //     cellRenderer: ({ rowData }) => (
        //         <ElTooltip content={toThousands(rowData.yearQkYuan)} placement="top">{toThousands(rowData.yearQk)}</ElTooltip>
        //     )
        // }
    ]
    tableData.cloumns = tableData.cloumns.concat(list)
}
if (props.type == 2) {
    const list = [
        {
            key: "rateActYear",
            dataKey: "rateActYear",
            title: "完成率",
            align: "right",
            width: celWidth,
            parentKey: 'multCol12',
            cellRenderer: ({ rowData }) => (
                <ElTooltip content={`${rowData.rateActYear}`} placement="top"><span class={rowData.yearRateColorLab == 1 ? 'zs-text-red' : ''}>{rowData.rateActYear}</span></ElTooltip>
            )
        },
    ]
    tableData.cloumns = tableData.cloumns.concat(list)
}

const biProjectCode = computed(() => {
    return props.biProjectCode
});
const yearmonth = computed(() => {
    return props.yearmonth
});
const isFresh = computed(() => {
    return props.isFresh
});
watch([biProjectCode, yearmonth, isFresh], () => {
    getList()
}, { deep: true });

let expandedRowKeys = ref([])
const convertToFlatArray = (arr) => {
    arr.map(item => {
        // item.lastStage = item.subjectLevel != 1 && item.lastStage == 1 ? 1 : 0 // 设置:是否为最后一级 是末级 但不是第一级 变灰色
        item.lastStage = 0 // 设置:是否为最后一级 0 都改为否 不变色
        item.curParentIndex = item.id.split('.')[0] - 1 // 设置统一的第一级index， 用于斑马纹
        // item.subjectLevel == 1 || item.subjectLevel == 2 ? expandedRowKeys.value.push(item.id) : '' // 第一级 第二级 默认展开
        // item.subjectLevel == 1? expandedRowKeys.value.push(item.id) : '' // 第一级 默认展开
        if (Array.isArray(item.children)) {
            convertToFlatArray(item.children);
        }
        return item
    })
}

const myEmits = defineEmits(['setDate']);
const getList = () => {
    tableData.loading = true
    detailApi.budgetCardInfoApi({ biProjectCode: props.biProjectCode, formatType: props.type, yearmonth: props.yearmonth }).then((res) => {
        if (res.data.code == 200) {
            initMultistageData(res.data.data.dataTime)
            convertToFlatArray(res.data.data.dataList)
            tableData.data = res.data.data.dataList
            tableData.loading = false
            myEmits('setDate', res.data.data.dataTime);
        }
    })
}
getList()

</script>

<style scoped lang="scss"></style>
